<script setup lang='ts' name="send-goods">
import type { FormInstance, FormRules } from 'element-plus'

import { updatePrivileges } from '@fl/api/iam-api'
import { SearchTable } from '@fl/components'
import UpdatedOss from '@fl/components/upLoad-oss.vue'
import { ElMessage } from 'element-plus'
import { computed, reactive, ref, toRefs } from 'vue'

const props = withDefaults(defineProps<{
    data?: any
    modelValue: boolean
}>(), {
    data: () => { },
})
const emits = defineEmits(['update:modelValue', 'confirm'])

const { data, modelValue } = toRefs(props)
const state = { code: '', description: '', display_name: '', group_name: '', module_name: '' }
const form = ref<any>({ ...state })
const formRef = ref()
const tableRef = ref<any>()
const gridOptions = reactive<any>({
    border: true,
    columns: [
        { field: 'code', title: '品牌' },
        { field: 'module_name', title: '型号' },
        { field: 'module_name', title: '规格属性' },
        { field: 'module_name', title: '单位' },
        { field: 'module_name', title: '数量' },
        { field: 'a', title: '累计发货数量' },
        { field: 'b', title: '累计验收数量' },
        { field: 'c', title: '剩余应发数量' },
        { headerClassName: 'redStar', slots: { default: 'count' }, title: '本次发货数量' },
    ],
    data: [],
    editConfig: {
        mode: 'row',
        showStatus: true,
        trigger: 'manual',
    },
    height: 350,
    keepSource: true,
    loading: false,
    pagerConfig: {
        currentPage: 1,
        enabled: true,
        pageSize: 10,
        pageSizes: [10, 20, 50, 100, 200, 500],
        total: 0,
    },
    showOverflow: true,
})
const rules = reactive<FormRules<any>>({
    code: [
        { message: '请输入', required: true, trigger: 'blur' },
    ],
    description: [
        { message: '请输入', required: true, trigger: 'blur' },
    ],
    display_name: [
        { message: '请输入', required: true, trigger: 'blur' },
    ],
    group_name: [
        { message: '请输入', required: true, trigger: 'blur' },
    ],
    module_name: [
        { message: '请输入', required: true, trigger: 'blur' },
    ],
})

const ableEdit = computed(() => {
    return form.value?.id
})

async function doSave(formEl: FormInstance | undefined) {
    if (!formEl)
        return
    await formEl.validate((valid, fields) => {
        if (valid) {
            updatePrivileges(form.value).then((res: any) => {
                console.log(res)
                close(formEl)
                emits('confirm')
            }).catch((err) => {
                const message = err?.response?.data?.message || err
                ElMessage({ message, type: 'error' })
            })
        }
        else {
            console.log('error submit!', fields)
        }
    })
}

function close(formEl: FormInstance | undefined) {
    formEl && formEl.resetFields()
    emits('update:modelValue', false)
}

function handleChange(value: number, row: any) {
    console.log(444, value, row)
}

async function init() {
    console.log(55, data.value)

    gridOptions.data = [
        {
            code: '支付',
            count: 0,
        },
        {
            code: '接单',
            count: 100,
        },
    ]
}
init()
</script>

<template>
    <el-dialog v-model="modelValue"
               width="1200"
               :close-on-click-modal="false"
               title="发货单"
               @close="close"
    >
        <div class="info-title">
            收货信息
        </div>

        <el-form ref="formRef"
                 :model="form"
                 :rules="rules"
                 label-width="auto"
        >
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="权限编码"
                                  prop="code"
                    >
                        <el-input v-model="form.code"
                                  :disabled="ableEdit"
                        />
                    </el-form-item>
                </el-col>

                <el-col :span="12">
                    <el-form-item label="附件信息:">
                        <el-input v-model="form.code"
                                  :disabled="ableEdit"
                        />
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="附件信息:">
                        <el-input v-model="form.code"
                                  :disabled="ableEdit"
                        />
                    </el-form-item>
                </el-col>

                <el-col :span="12">
                    <el-form-item label="附件信息:">
                        <el-input v-model="form.code"
                                  :disabled="ableEdit"
                        />
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="发货资料"
                                  prop="yingyzzurl"
                    >
                        <UpdatedOss v-model="form.yingyzzurl"
                                    list-type="text"
                                    :is-public="false"
                                    accept=".png,.jpg,.jpeg,docx,.xlsx,.pdf"
                                    tips="只能上传jpg、jpeg、png、docx、xlsx、pdf文件"
                        />
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>

        <div class="info-title">
            商品信息
        </div>

        <SearchTable v-bind="gridOptions"
                     ref="tableRef"
                     v-model:pager="gridOptions.pagerConfig"
                     :loading="gridOptions.loading"
        >
            <template #count="{ row }">
                <el-input-number v-model="row.count"
                                 style="width: 100px;"
                                 :precision="0"
                                 :min="1"
                                 size="small"
                                 @change="handleChange($event, row)"
                />
            </template>
        </SearchTable>

        <div style="text-align: center;margin-top: 10px;">
            <el-button @click="close(formRef)">
                关闭
            </el-button>

            <el-button type="primary"
                       @click="doSave(formRef)"
            >
                确认发货
            </el-button>
        </div>
    </el-dialog>
</template>

<style lang="less" scoped>
:deep(.redStar) {
    span::before {
        content: '*';
        color: red;
        margin-right: 2px;
    }
}

.info-title {
    font-size: 16px;
    font-weight: 600;
    line-height: 40px;
}
</style>
